<template>
    <el-dialog v-model="drawer" title="选择分享" center draggable destroy-on-close @close="close">
        <el-transfer v-model="selectList" :props="{key: 'userId', label: 'nickname'}" filterable
            :titles="['列表', '分享者']"  :data="userList" ></el-transfer>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="submit">
                    保 存
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { computed, reactive, toRefs, watch, onMounted, nextTick, ref, provide } from 'vue'
import { ElMessage } from 'element-plus'
import api from '/@/api/commonApi'


export default {
    name: 'SelectShareUser',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        userList: {
            type: Array,
            default() {
                return []
            }
        },
        fileMap: { // 文件数据
            type: Object,
            default() {
                return {}
            }
        }
    },
    emits: ['onSubmit', 'update:dialogDrawer'],
    setup(props, context) {
        const { dialogDrawer, userList, fileMap } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const state = reactive({            
            selectList: []
        })

        // 提交数据
        const submit = () => {
            console.log(state.selectList);
            let params = []
            state.selectList.forEach(item => {
                params.push({
                    fileLogId: fileMap.value.id,
                    userId: item
                })
            })
            api.createBatch(params).then(res => {
                ElMessage.success("分享成功")
                close()
            })
        }
        // 关闭
        const close = () => {
            state.selectList = []
            context.emit('update:dialogDrawer', false)
        }

        onMounted(() => {
            
        })
        return {
            ...toRefs(state),
            drawer,
            close,
            submit
        }
    }

}
</script>

<style lang="scss">
.el-transfer-panel__filter {
    height: 30px !important;
}
</style>